<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/rights">权限管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 添加角色按钮区域 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showRoleAddDialog">添加角色</el-button>
        </el-col>
      </el-row>
      <!-- 角色列表 -->
      <!-- row-key用来优化表格渲染，改变数据，只会影响当前行的dom更新，不会影响其他行，提升性能 -->
      <el-table :data="rolesList" border stripe row-key="id">
        <!-- 展开列:权限信息的展示区域 -->
        <!-- 展开列:权限信息的展示区域 -->
        <el-table-column type="expand">
          <!-- 作用域插槽渲染权限列表  -->
          <template #default="scope">
            <!--  布局思想：一个一级权限独占1行，1行分2列，一级权限占一列，占5格，在第一个el-row里面循环；二、三级在一列，占19格，二、三级所在的列再分成多行，每一行里面又分成2列，二级权限占第二个el-row里面的6格，在第二个el-row循环获得；三级权限占18格，循环tag标签 -->
            <!-- 行的头部和底部边框线样式的设置及文本垂直居中设置 -->
            <el-row v-for="(item1, i1) in scope.row.children" :key="item1.id" :class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']">
              <!-- 渲染一级权限 -->
              <el-col :span="5">
                <!--  移除一级权限 -->
                <el-tag closable @close="removeRightById(scope.row, item1)">
                  {{ item1.authName }}
                </el-tag>
              </el-col>
              <!-- 渲染二级和三级权限 -->
              <el-col :span="19">
                <!-- 通过for循环嵌套渲染二级权限 -->
                <!-- 行的头部边框线样式的设置及文本垂直居中设置 -->
                <el-row v-for="(item2, i2) in item1.children" :key="item2.id" :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']">
                  <el-col :span="6">
                    <!--  移除二级权限 -->
                    <el-tag type="success" closable @close="removeRightById(scope.row, item2)">
                      {{ item2.authName }}
                    </el-tag>
                  </el-col>
                  <el-col :span="18">
                    <!--  移除三级权限 -->
                    <el-tag type="warning" v-for="item3 in item2.children" :key="item3.id" closable @close="removeRightById(scope.row, item3)">
                      {{ item3.authName }}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template #default="{ row }">
            <el-button size="small" type="primary" :icon="Edit" @click="showRoleEditDialog(row.id)"></el-button>
            <el-button size="small" type="danger" :icon="Delete" @click="deleteRole(row.id)"></el-button>
            <el-button size="small" type="warning" :icon="Setting" @click="showSetRightDialog(row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加角色的组件 -->
    <role-add ref="roleAddRef" @getRoleList="getRoleList"></role-add>
    <!-- 编辑角色的组件 -->
    <role-edit ref="roleEditRef" @getRoleList="getRoleList"></role-edit>
    <!-- 分配权限的组件 -->
    <role-rights ref="roleRightsRef" @getRoleList="getRoleList"></role-rights>
  </div>
</template>

<script setup>
import { Edit, Delete, Setting } from '@element-plus/icons-vue'
import RoleAdd from './components/RoleAdd.vue'
import RoleEdit from './components/RoleEdit.vue'
import RoleRights from './components/RoleRights.vue'

import { ref } from 'vue'
import { getRoleListApi, removeRightByIdApi, deleteRoleApi } from '@/api/role'

// 分配权限的组件对象
const roleRightsRef = ref(null)
// 点击分配权限按钮
const showSetRightDialog = row => {
  roleRightsRef.value.open(row)
}

// 添加角色子组件对象
const roleAddRef = ref(null)
// 点击添加角色按钮触发
const showRoleAddDialog = () => {
  // console.log(roleAddRef.value)
  roleAddRef.value.open()
}

// 编辑角色子组件对象
const roleEditRef = ref(null)
// 点击修改角色按钮触发
const showRoleEditDialog = id => {
  roleEditRef.value.open(id)
}

// 获取角色列表数据
const rolesList = ref([])
const getRoleList = async () => {
  const data = await getRoleListApi()
  rolesList.value = data
}
getRoleList()

// 删除角色对应的权限
const removeRightById = async (role, rights) => {
  try {
    // 弹框询问
    await ElMessageBox.confirm('您确定要删除该角色对应的权限吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    // 如果删除的是一、二级权限，需要考虑其有没有子级，如果有子级，不允许删除，必须无子级了，才能删除
    if (rights.children && rights.children.length > 0) {
      ElMessage.warning('该权限有子级，不允许删除')
      return
    }
    // 确认删除,删除成功后返回的是该角色最新的权限数据，为了不让页面重新加载，需要把最新的数据赋值给role
    const data = await removeRightByIdApi(role.id, rights.id)
    role.children = data
    ElMessage.success('删除成功')
  } catch (err) {
    ElMessage.info('取消删除')
    console.log(err)
  }
}

// 删除角色
const deleteRole = async id => {
  try {
    // 弹框询问
    await ElMessageBox.confirm('您确定要删除该角色吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    // 确认删除
    await deleteRoleApi(id)
    ElMessage.success('删除成功')
    getRoleList()
  } catch (err) {
    ElMessage.info('取消删除')
    console.log(err)
  }
}
</script>

<style lang="scss" scoped>
//tag标签的间距
.el-tag {
  padding: 13px !important;
  margin: 7px;
}
//每一行的顶部加上边框
.bdtop {
  border-top: 1px solid #eee;
}
//每一行的底部加下边框
.bdbottom {
  border-bottom: 1px solid #eee;
}
//每一个一、二级的内容垂直居中
.vcenter {
  display: flex;
  align-items: center;
}
</style>